<template>
    <div class="detailPage" >
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">
          <div class="mugShot">
            <i style="position: absolute;justify-content: flex-start;opacity: 0.5;margin: 10px;font-style: normal;background: red;width: 40px;text-align: center;border-radius: 5px"></i>
            <img class="img1" :src="test( bookList.img_src )" alt="">
          </div>
        </div></el-col>
        <el-col :span="14"><div class="grid-content bg-purple">
          <div class="introduce">
            <p style="font-size: 30px">{{ bookList.name }}</p>
            <i class="el-icon-star-on"  @click=collect() v-bind:style="{color: activeColor}"></i>
            <p style="margin-top: 20px">Deatail</p>
              <el-row :gutter="20" style="margin-top: 10px">
                <el-col :span="6"><div class="grid-content bg-purple">
                  <p style="color: gray;">作者</p>
                  <p style="font-size: 20px">{{ bookList.author }}</p>
                </div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple"></div>
                  <p style="color: gray;">价格</p>
                  <p style="font-size: 20px">{{ bookList.price }}</p></el-col>
                <el-col :span="10"><div class="grid-content bg-purple"></div>
                  <p style="color: gray;">概要</p>
                  <p style="font-size: 20px">{{ bookList.synopsis }}</p></el-col>
              </el-row>
            <div class="classify" style="margin-top: 10px">
              <ul style="margin: 20px">
                <li>123</li>
                <li>123</li>
                <li>123</li>
                <li>123</li>
              </ul>
            </div>
<!--            <button>购买</button>-->
          </div>

        </div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">
        </div>
         </el-col>
      </el-row>
      <el-divider></el-divider>
      <div class="evaluate"></div>
      评价:
    </div>
</template>

<script>
import {getDetailById} from '@/api/index'
import getMessage from "@/utils/message";
import getImg from "@/utils/getImg"
const i = document.querySelectorAll('el-icon-star-on')
export default {
    name: "Detail",
    data() {
      return {
        activeColor:'white',
        bookList:'',
        imag:'bookList.img_src',
      }
    },
    mounted() {
        //点击商品传递过来的商品id
      console.log(this.$route.query.id)
      const id =this.$route.query.id
      const bookLists = this.$route.query.bookLists
      bookLists.forEach((value,index)=> {
        if(value.id === id){
          this.bookList = value
        }
      })
    },
    methods: {
      collect() {
        console.log(this.activeColor)
        if(this.activeColor === "white") {
          this.activeColor = 'orange'
        }else {
          this.activeColor = 'white'
        }

      },
      test(img) {
        return getImg(img)
      }
  }
}
</script>

<style scoped lang="less">
.detailPage {
  padding: 20px;
  .mugShot {
    display: flex;
    height: 300px;
    background: #eeeeee;
    border-radius: 10px;
    img {
      height: 80%;
      width: 80%;
      border-radius: 10px;
      margin: auto;
    }
  }
  .introduce {
    height: 300px;
    background: #eeeeee;
    border-radius: 20px;
    padding: 20px;
    .el-icon-star-on{
      cursor: pointer;
      margin-top: -30px;
      float: right;
      font-size: 30px;
    }
    button {
      float: right;
      cursor: pointer;
      margin-top: -40px;
      font-size: 20px;
      width: 100px;
      height: 30px;
      background: skyblue;
      border-radius: 5px;
    }
  }
}

</style>